<!--suppress ALL -->
<template>

 <span>
    <list-cpt :head-items=this.headItems :data=this.data :paged=this.paged
              :content="content"
              :postUrl="privAddUrl" :updateUrl="privUpdateUrl" :deleteUrl="privDeleteUrl"
              @refreshPageSize="refreshPageSize" @refreshCurrentPage="refreshCurrentPage">

      <template #add>
         <el-form ref="form" :model="content">
            <el-form-item label="权限名称">
              <el-input placeholder="权限名称" v-model="content.label"></el-input>
            </el-form-item>
            <el-form-item label="权限编码">
              <el-input placeholder="权限编码" v-model="content.code"></el-input>
            </el-form-item>
            <el-form-item label="请求路径">
              <el-input placeholder="请求路径" v-model="content.url"></el-input>
            </el-form-item>
            <el-form-item label="请求方法">
              <el-input placeholder="请求方法" v-model="content.method"></el-input>
            </el-form-item>
            <el-form-item label="权限功能描述">
              <el-input placeholder="权限功能描述" v-model="content.detail"></el-input>
            </el-form-item>
            <el-form-item label="权限是否为根节点">
              <el-input placeholder="权限是否为根节点" v-model="content.isRoot"></el-input>
            </el-form-item>
            <el-form-item label="权限父权限">
              <el-input placeholder="权限父权限" v-model="content.parentId"></el-input>
            </el-form-item>
         </el-form>
      </template>

      <template #update>
         <el-form ref="form" :model="content">
            <el-form-item label="权限名称">
              <el-input placeholder="权限名称" v-model="content.label"></el-input>
            </el-form-item>
            <el-form-item label="权限编码">
              <el-input placeholder="权限编码" v-model="content.code"></el-input>
            </el-form-item>
            <el-form-item label="请求路径">
              <el-input placeholder="请求路径" v-model="content.url"></el-input>
            </el-form-item>
            <el-form-item label="请求方法">
              <el-input placeholder="请求方法" v-model="content.method"></el-input>
            </el-form-item>
            <el-form-item label="权限功能描述">
              <el-input placeholder="权限功能描述" v-model="content.detail"></el-input>
            </el-form-item>
            <el-form-item label="权限是否为根节点">
              <el-input placeholder="权限是否为根节点" v-model="content.isRoot"></el-input>
            </el-form-item>
            <el-form-item label="权限父权限">
              <el-input placeholder="权限父权限" v-model="content.parentId"></el-input>
            </el-form-item>
         </el-form>
      </template>

    </list-cpt>
  </span>

</template>

<script>
  import ListCpt from '../../../components/ListCpt'
  import {uaaPrivItem} from '../../../components/Po'
  import {url} from '../../../common/Common.js'
  import {get} from '../../../components/HttpUtil'

  export default {
    name: 'UaaPrivPage',
    components: {ListCpt},

    data () {
      return {
        headItems: uaaPrivItem,
        paged: true,
        currentPage: 1,
        pageSize: 10,
        count: 0,
        data: {},
        privListUrl: url.uaa.priv.list,
        privAddUrl: url.uaa.priv.add,
        privUpdateUrl: url.uaa.priv.update,
        privDeleteUrl: url.uaa.priv.delete,
        content: {
          label: '',
          code: '',
          url: '',
          method: '',
          detail: '',
          isRoot: '',
          parentId: ''
        },
      }
    },
    methods: {
      gainList: function () {
        var url = this.privListUrl + '?size=' + this.pageSize + '&page=' + this.currentPage
        get(url, this.$store.state.token)
          .then(res => {
            this.data = res.data
          })
          .catch(e => {
            console.log(e)
          })
      },
      refreshPageSize (val) {
        this.currentPage = 1
        this.pageSize = val
        this.gainList()
      },

      refreshCurrentPage (val) {
        this.currentPage = val
        this.gainList()
      },

    },
    mounted: function () {
      this.gainList()
    }
  }


</script>

<style scoped>
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
  }

  .el-menu-vertical-demo {
    min-height: 100%;
  }
</style>
